@import "Reset.scss";
@import "./Common\ Styles.scss";

// 生活在蚂scss

@function Ant_Group($w) {
  @return calc($w/1451) * 100 + vw;
}
@function font($w) {
  @return calc($w / 1451) * 100 + vmin;
}

.wrap {
  width: 100%;
  //   背景图片
  .box {
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: -1;
    background: url(https://gw.alipayobjects.com/mdn/rms_02c092/afts/img/A*0RJtQKkvVSQAAAAAAAAAAAAAARQnAQ)
      top center / contain no-repeat;
    // background-image: url(https://gw.alipayobjects.com/mdn/rms_02c092/afts/img/A*0RJtQKkvVSQAAAAAAAAAAAAAARQnAQ);
  }
  //   身体部分
  .main {
    width: Ant_Group(1040);
    // height: Ant_Group(1000);
    margin: 0 auto;
    .imgbox {
      width: Ant_Group(275.69);
      margin: 0 auto;
      //   background-color: pink;
      margin-top: Ant_Group(68);
      margin-bottom: Ant_Group(50);
      img {
        vertical-align: middle;
        border-style: none;
        // margin: 0 auto;
        // text-align: center;
        // background-color: pink;
        width: Ant_Group(275.69);
        height: Ant_Group(64);
      }
    }
    // 第一个盒子
    .picture {
      //   width: Ant_Group(1040);
      display: flex;
      position: relative;
      width: Ant_Group(1040);
      height: Ant_Group(504);
      margin-top: Ant_Group(40);
      .lfet {
        width: Ant_Group(960);
        height: Ant_Group(504);
        img {
          width: 100%;
        }
      }
      .right {
        position: absolute;
        left: Ant_Group(488);
        line-height: Ant_Group(20);
        top: Ant_Group(40);
        // background-color: pink;
        width: Ant_Group(552);
        height: Ant_Group(424);
        border-radius: Ant_Group(15);
        background-color: #fff;
        opacity: 0.9;
        padding: Ant_Group(36) Ant_Group(48);
        box-sizing: border-box;

        .right_size {
          width: Ant_Group(456);
          height: Ant_Group(355);
          margin: 0 auto;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding: Ant_Group(10);
          box-sizing: border-box;
          font-family: PingFangSC-Regular;
          font-size: Ant_Group(14);

          & > h2 {
            font-size: Ant_Group(25);
            font-weight: bold;
            // margin-top: Ant_Group(46.29);
            color: rgba(17, 17, 17, 1);
          }

          & > div > h3{
            margin: Ant_Group(7) 0;
            font-weight: bold;
          }

          & > div >  p{
            color: #666;
            line-height: Ant_Group(22);
            
          }
        }
      }
      &:nth-child(4) {
        transform: rotateY(180deg);
        & > .lfet {
          transform: rotateY(180deg);
        }
        & > .right {
          transform: rotateY(180deg);
        }
      }
      &:nth-child(2) {
        transform: rotateY(180deg);
        & > .lfet {
          transform: rotateY(180deg);
        }
        & > .right {
          transform: rotateY(180deg);
        }
      }
    }
      // 第二个盒子
    // .picture_left {
    //   width: Ant_Group(1040);
    //   height: Ant_Group(504);
    //   display: flex;
    //   position: relative;
    //   margin-top: Ant_Group(40);
    //   justify-content: end;
    //   .lfet_one {
    //     width: Ant_Group(960);
    //     height: Ant_Group(504);
    //     img {
    //       width: 100%;
    //     }
    //   }
    //   .right {
    //     position: absolute;
    //     left: 0;
    //     top: Ant_Group(40);
    //     width: Ant_Group(552);
    //     height: Ant_Group(424);
    //     border-radius: Ant_Group(15);
    //     background-color: #fff;
    //     opacity: 0.9;

    //     .right_size {
    //       width: Ant_Group(456);
    //       height: Ant_Group(331.42);
    //       margin: 0 auto;
    //       h2 {
    //         font-size: Ant_Group(25);
    //         font-weight: bold;
    //         margin-top: Ant_Group(46.29);
    //         color: rgba(17, 17, 17, 1);
    //       }

    //       p:nth-child(even) {
    //         font-weight: bold;
    //         font-size: Ant_Group(15);
    //         margin-top: Ant_Group(28);
    //         // line-height:Ant_Group(20);
    //         color: #000;
    //       }
    //       p:nth-child(odd) {
    //         font-weight: bold;
    //         line-height: Ant_Group(20);
    //         color: #666;
    //         font-weight: 400;
    //         // font-family: PingFangSC-Regular;
    //         font-size: Ant_Group(14);
    //         margin-top: Ant_Group(10);
    //       }
    //     }
    //   }
    // }
  }

  // 底部
  footer {
    width: 100%;
    height: Ant_Group(253);
    background-color: rgba(28, 37, 51, 1);
    display: flex;
    flex-direction: column;
    color: rgba(255, 255, 255, 0.6);
    font-style: Ant_Group(12);
    font-weight: 300;
    margin-top: Ant_Group(80);
    // 底部地址、咨询、关注模块
    .footer_top {
      display: flex;
      flex: 1;
      justify-content: center;
      align-items: center;
      .footer_top_content {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: Ant_Group(51) 0;
        border-bottom: Ant_Group(1) solid rgba(255, 255, 255, 0.1);
        // 地址
        .footer_top_address {
          @include footerInfo;
        }
        // 咨询
        .footer_top_consult {
          @include footerInfo;
        }
        // 关注
        .footer_top_aboutUs {
          width: Ant_Group(295);
          height: Ant_Group(90);
          h2 {
            font-size: Ant_Group(16);
            color: #fff;
            font-weight: bold;
          }
          // icon图标模块
          .aboutUs_iconGroup {
            position: relative;
            display: flex;
            margin-top: Ant_Group(33);
            .aboutUs_iconItem {
              width: Ant_Group(32);
              margin-right: Ant_Group(18);
            }
            // 图标hover
            .wechat {
              &:hover ~ .wechat_QR_code {
                display: block;
              }
            }
            .weibo {
              &:hover ~ .weibo_QR_code {
                display: block;
              }
            }
            .maimai {
              &:hover ~ .maimai_QR_code {
                display: block;
              }
            }
            // 二维码
            .wechat_QR_code {
              @include QR;
              &::after {
                @include QR_after;
              }
            }
            .weibo_QR_code {
              @include QR;
              left: -9px;
              // display: none;
              &::after {
                @include QR_after;
              }
            }
            .maimai_QR_code {
              @include QR;
              left: 40px;
              &::after {
                @include QR_after;
              }
            }
          }
        }
      }
    }
    // 底部经营许可信息栏
    .footer_bottom {
      width: 100%;
      height: Ant_Group(66);
      display: flex;
      justify-content: center;
      align-items: center;
      p {
        padding: Ant_Group(8);
        position: relative;
        &:nth-child(1)::after {
          @include footer_p_after;
        }
        &:nth-child(2)::after {
          @include footer_p_after;
        }
      }
    }
  }
}
